$(function() {
  var layer = layui.layer
  var form = layui.form
  var laypage = layui.laypage
  
  // 定义一个查询的参数对象，将来请求数据的时候，
  // 需要将请求参数对象提交到服务器
  var q = {
    pageNum: 1, // 页码值，默认请求第一页的数据
    pageSize: 3, // 每页显示几条数据，默认每页显示3条
    bookName: null, // 图书的名称        
    bookAuthorName: null // 作者的名称           
  }

  initTable()

  // 获取图书数据的方法
  function initTable() {
    $.ajax({
      method: 'POST',
      url: '/api/book/queryBookById/'+q.pageNum+'/'+q.pageSize,
      contentType: 'application/json;charset=UTF-8',        
      data: JSON.stringify(q),
      success: function(res) {
        if (res.status !== 0) {      
          return layer.msg('获取图书数据失败！')  
        }
        // 使用模板引擎渲染页面的数据
        var htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
        // 调用渲染分页的方法
        renderPage(res.data.total)
      }
    })
  }

  // 为筛选表单绑定 submit 事件
  $('#form-search').on('submit', function(e) {
    e.preventDefault()
    // 获取表单中选中项的值
    var bookName = $('[name=bookName]').val()
    var bookAuthorName = $('[name=bookAuthorName]').val()
    // 为查询参数对象 q 中对应的属性赋值
    q.bookName = (bookName === '') ? null : bookName
    q.bookAuthorName = (bookAuthorName === '') ? null : bookAuthorName
    initTable()
  })



  // 通过代理的形式，为 btn-edit 按钮绑定点击事件
  var indexEdit = null
  $('tbody').on('click', '.btn-edit', function() {
    // 弹出一个修改图书信息的层
    indexEdit = layer.open({
      type: 1,
      area: ['500px', '400px'],
      title: '修改图书信息',
      content: $('#dialog-edit').html()
    })

    var bookShowId = $(this).attr('data-id')
   // console.log(id)
    // 发起请求获取对应图书的数据
    $.ajax({
      method: 'GET',
      url: '/api/book/queryBookById/' + bookShowId,
      success: function(res) {
        form.val('form-edit', res.data)
      }
    })
  })

  // 通过代理的形式，为修改图书的表单绑定 submit 事件
  $('body').on('submit', '#form-edit', function(e) {
    e.preventDefault()
    $.ajax({
      method: 'POST',
      url: '/api/book/updateBook',
      contentType: 'application/json;charset=UTF-8',
      data: JSON.stringify({
        "bookShowId": $('[name=bookShowId').val(),
        "bookName": $('[name=bookName]').val(), 
        "bookAuthorName": $('[name=bookAuthorName]').val(),  
        "bookPrice": $('[name=bookPrice]').val(),     
        "bookPlace": $('[name=bookPlace]').val(), 
        "bookRemark": $('[name=bookRemark]').val(), 
      }),
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('更新图书数据失败！')
        }
        layer.msg('更新图书数据成功！')
        layer.close(indexEdit)
        initTable()
      }
    })
  })

  // 定义渲染分页的方法
  function renderPage(total) {
    // 调用 laypage.render() 方法来渲染分页的结构
    laypage.render({
      elem: 'pageBox', // 分页容器的 Id
      count: total, // 总数据条数
      limit: q.pageSize, // 每页显示几条数据
      curr: q.pageNum, // 设置默认被选中的分页
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [1,3,5,8,10],
      // 分页发生切换的时候，触发 jump 回调
      // 触发 jump 回调的方式有两种：
      // 1. 点击页码的时候，会触发 jump 回调
      // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调
      jump: function(obj, first) {
        // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
        // 如果 first 的值为 true，证明是方式2触发的
        // 否则就是方式1触发的
        //console.log(first)
        //console.log(obj.curr)
        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.pageNum = obj.curr
        // 把最新的条目数，赋值到 q 这个查询参数对象的 pagesize 属性中
        q.pageSize = obj.limit
        // 根据最新的 q 获取对应的数据列表，并渲染表格
        // initTable()
        if (!first) {
          initTable()
        }
      }
    })
  }

  // 通过代理的形式，为删除按钮绑定点击事件处理函数
  $('tbody').on('click', '.btn-delete', function() {
    // 获取删除按钮的个数
    var len = $('.btn-delete').length
    console.log(len)
    // 获取到图书的 id
    var bookShowId = $(this).attr('data-id')
    // 询问用户是否要删除数据
    layer.confirm('确认删除?', { icon: 3, title: '提示' }, function(index) {
      $.ajax({
        method: 'POST',
        url: '/api/book/deleteBook/' + bookShowId,
        success: function(res) {
          if (res.status !== 0) {
            return layer.msg('删除图书失败！')
          }
          layer.msg('删除图书成功！')
          // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
          // 如果没有剩余的数据了,则让页码值 -1 之后,
          // 再重新调用 initTable 方法
          // 4
          if (len === 1) {
            // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
            // 页码值最小必须是 1
            q.pageNum = q.pageNum === 1 ? 1 : q.pageNum - 1
          }
          initTable()
        }
      })

      layer.close(index)
    })
  })
})
